<!-- 省市二级选择器 -->
<template>
	<view>
		<picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index" :range="array" range-key="name">
			<view :class="title=='请选择意向城市' ? 'color999' : ''">{{ title }}</view>
		</picker>
	</view>
</template>

<script>
export default {
	name: 'city-selection',
	props:{
		titleCity:{
			type:String,
			default:'请选择意向城市'
		}
		
	},
	data() {
		return {
			index: [0, 0],
			array: [[], []],
			childArr: [], // 二级分类数据源
			title: '请选择意向城市'
		};
	},
	methods: {
		// 任务分类
		getCate() {
			var res = require('@/common/js/city.js');
			// 一级分类的数据源
			this.array[0] = res.getAreaInfo;
			// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
			this.childArr = res.getAreaInfo.map(item => item.city);
			// 第一次打开时，默认给一级分类添加它的二级分类
			this.array[1] = this.childArr[0];
			console.log('this.array22222222222', this.array);
		},

		// 获取二级分类
		columnchange(e) {
			// 当滚动切换一级分类时，为当前的一级分类添加它的子类
			if (e.detail.column == 0) {
				// #ifdef H5
				// 在小程序中直接赋值无效  H5 可直接赋值
				this.array[1] = this.childArr[e.detail.value];
				// #endif
				// #ifdef MP-WEIXIN
				// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
				this.$set(this.array, 1, this.childArr[e.detail.value]);
				// #endif
			}
		},

		// 选择任务分类
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			let value = e.target.value;
			this.index = value;
			if (this.array[0].length != 0) {
				this.title = this.array[0][this.index[0]].name;
			}
			if (this.array[1].length != 0) {
				this.title += '-' + this.array[1][this.index[1]].name;
			}
			this.$emit('getCity',this.array[1][this.index[1]].name)
		}
	},
	watch:{
		 titleCity (value) {
		     this.title=value
		    },
	}
};
</script>

<style></style>
